<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>注册</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">


</head>
<body>
<div class="page login-page">
  <div class="container d-flex align-items-center">
    <div class="form-holder has-shadow">
      <div class="row">
        <!-- Logo & Information Panel-->
        <div class="col-lg-6">
          <div class="info d-flex align-items-center">
            <div class="content">
              <div class="logo">
                <h1>欢迎注册</h1>
              </div>
            </div>
          </div>
        </div>
        <!-- Form Panel    -->
        <div class="col-lg-6 bg-white">
          <div class="form d-flex align-items-center">
            <div class="content">
              <!--表单-->
              <form id="registerForm" action="" method="post" enctype="multipart/form-data">
              <div class="form-group">
                <input id="register-username" class="input-material" type="text" name="userName" placeholder="请输入用户名" >
                <div class="invalid-feedback">
                  用户名必须在2~10位之间
                </div>
              </div>
              <div class="form-group">
                <input id="register-password" class="input-material" type="password" name="passWord" placeholder="请输入密码"   >
                <div class="invalid-feedback">
                  密码必须在6~10位之间
                </div>
              </div>
              <div class="form-group">
                <input id="register-passwords" class="input-material" type="password" name="passWord" placeholder="确认密码"   >
                <div class="invalid-feedback">
                  两次密码必须相同 且在6~10位之间
                </div>
              </div>
              <!-- 手机号 -->
              <div class="form-group">
                <input id="register-tel" class="input-material" type="text" name="userTel" placeholder="请输入手机号"   >
                <div class="invalid-feedback">
                  请输入正确的 11 位手机号!
                </div>
              </div>

              <!-- 头像 -->
              <div class="form-group">
                <input type="file"  name="userPhoto" id="textfield" onchange="document.getElementById('textfield').value=this.value">
                <br>上传头像，请选择jpg文件
              </div>

              <!-- 验证码 -->
              <div class="form-group">
                <input name="check" class="input-material" type="text" placeholder="请输入验证码" autocomplete="off">
                <span>
						<img src="checkCode" alt="" onclick="changeCheckCode(this)">
					</span>
              </div>
              <script type="text/javascript">
                //图片点击事件
                function changeCheckCode(img) {
                  img.src="checkCode?"+new Date().getTime();
                }
              </script>

              <div class="form-group">
                <button id="regbtn" type="button" class="btn btn-primary">注册</button>
              </div>
              </form>
              <small>已有账号?</small><a href="index.html" class="signup">&nbsp;登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- JavaScript files-->
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<script>
  $(function(){
    /*错误class  form-control is-invalid
    正确class  form-control is-valid*/
    var flagName=false;
    var flagPas=false;
    var flagPass=false;
    var flagTel = false;
    /*验证用户名*/
    var name,passWord,passWords,registerTel;
    $("#register-username").change(function(){
      name=$("#register-username").val();
      if(name.length<2||name.length>10){
        $("#register-username").removeClass("form-control is-valid")
        $("#register-username").addClass("form-control is-invalid");
        flagName=false;
      }else{
        $("#register-username").removeClass("form-control is-invalid")
        $("#register-username").addClass("form-control is-valid");
        flagName=true;
      }
    })
    /*验证密码*/
    $("#register-password").change(function(){
      passWord=$("#register-password").val();
      if(passWord.length<6||passWord.length>18){
        $("#register-password").removeClass("form-control is-valid")
        $("#register-password").addClass("form-control is-invalid");
        flagPas=false;
      }else{
        $("#register-password").removeClass("form-control is-invalid")
        $("#register-password").addClass("form-control is-valid");
        flagPas=true;
      }
    })
    /*验证确认密码*/
    $("#register-passwords").change(function(){
      passWords=$("#register-passwords").val();
      if((passWord!=passWords)||(passWords.length<6||passWords.length>18)){
        $("#register-passwords").removeClass("form-control is-valid")
        $("#register-passwords").addClass("form-control is-invalid");
        flagPass=false;
      }else{
        $("#register-passwords").removeClass("form-control is-invalid")
        $("#register-passwords").addClass("form-control is-valid");
        flagPass=true;
      }
    })

    /*验证手机号*/
    $("#register-tel").change(function(){
      registerTel=$("#register-tel").val();
      if(registerTel.length!=11){
        $("#register-tel").removeClass("form-control is-valid")
        $("#register-tel").addClass("form-control is-invalid");
        flagTel=false;
      }else{
        $("#register-tel").removeClass("form-control is-invalid")
        $("#register-tel").addClass("form-control is-valid");
        flagTel=true;
      }
    })


    $("#regbtn").click(function(){
      if(flagName&&flagPas&&flagPass&&flagTel){
        //所有的验证都正确时，开始向服务器发送数据
        $.post("userRegister1",$("#registerForm").serialize(),function (data) {
          //后端响应的格式为 data{flag:true,errorMsg:用户名存在}
          var flag = data.flag;
          if(flag){
            //注册成功
            alert("注册成功,请登录！");
            location = "index.html";
          }else{
            //注册失败
            alert(data.errorMsg);
            location = "register.html";
          }
        },"json");

      }else{
        if(!flagName){
          $("#register-username").addClass("form-control is-invalid");
        }
        if(!flagPas){
          $("#register-password").addClass("form-control is-invalid");
        }
        if(!flagPass){
          $("#register-passwords").addClass("form-control is-invalid");
        }
        if(!flagTel){
          $("#register-tel").addClass("form-control is-invalid");
        }
      }
    })


  })
</script>
</body>
</html>